<template>
  <div id="examinpaper_manage" class="container">
    <div class="content">
      <div class="panel">
        <div class="condition">
          <div class="row_one">
            <el-select v-model="tabledisplayObj.status" clearable placeholder="选择上架状态" style="width: 1.8rem;float: left;">
							<el-option v-for="item in statusModeList" :key="item.name" :label="item.name" :value="item.value"></el-option>
						</el-select>
            <el-input
              v-model="tabledisplayObj.title"
              style="width:20%;float: left;margin-left:.1rem;"
              placeholder="输入试卷标题"
              class="input_search"
              clearable
            ></el-input>
            <div
              class="search_btn"
              style="margin-left:0.1rem;"
              @click="search()"
              v-if="hasApi('examinpaperList')"
            >搜索</div>
            <div
              class="btn_user_defined"
              style="margin-left:0.1rem;"
              @click="reset"
              v-if="hasApi('examinpaperList')"
            >重置</div>
            <el-button type="primary" style="float: right;" :disabled="!isGround" @click="uploadExaminpaper" v-if="hasApi('examinpaperUpdate')">上架</el-button>
            <el-button type="primary" style="float: right;margin-right:0.1rem;" :disabled="!isDelete" @click="deleteExaminpaper" v-if="hasApi('evaluateReportDelete')">删除</el-button>
            <el-button type="primary" style="float: right;" @click="addExaminpaper" v-if="hasApi('examinpaperAdd')">添加试卷</el-button>
          </div>
        </div>
        <div>
          <table class="table" cellspacing="0" style="table-layout:fixed;">
            <thead class="thead">
              <tr>
                <td style="width: 1rem;">
                  <div class="check" @click="checkAll()" :class="isCheckAll? 'check_active':''">
                    <div>序号</div>
                  </div>
                </td>
                <td style="width: 4rem;">试卷标题</td>
                <td style="width: 2rem;">总分</td>
                <td style="width: 2rem;">上架状态</td>
                <td style="width: 2rem;">使用状态</td>
                <td style="width: 2rem;">已测评</td>
                <td style="width: 2rem;">测评中</td>
                <td style="width: 2rem;">创建时间</td>
                <td style="width: 4rem;">操作</td>
              </tr>
            </thead>
            <tbody class="tbody">
              <tr v-for="item,index in examinpaperList">
                <td>
                  <div
                    class="check"
                    @click="checkItem(item)"
                    :class="item.isCheck? 'check_active':''"
                  >
                    <div style="width: 0.48rem;">{{(index+1)+(tabledisplayObj.curPage-1)*tabledisplayObj.pageSize}}</div>
                  </div>
                </td>
                <td>{{item.title}}</td>
                <td>{{item.totalScore == null?0:item.totalScore}}</td>
                <td v-if="item.status == 0">未上架</td>
                <td v-else-if="item.status == 1">已上架</td>
                <td v-else>禁用</td>
                <td>{{item.reportCount+item.startCount == 0?"未使用":"已使用"}}</td>
                <td>{{item.reportCount}}</td>
                <td>{{item.startCount}}</td>
                <td>{{item.createTime}}</td>
                <td>
                  <span class="operate_btn" @click="look_examinpaper(item)">基本信息&nbsp;</span>
                  <span
                    class="operate_btn"
                    @click="add_edit_examinpaper(item)"
                    v-if="item.status == 0 && hasApi('examinpaperAddSubject') && hasApi('examinpaperUpdateSubject')"
                  >{{item.evSubjects != null && item.evSubjects.length>0?"编辑试卷":"添加试题"}}&nbsp;</span>
                  <span class="operate_btn" @click="preview_examinpaper(item)" v-if="hasPage('105')">预览试卷</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <el-pagination
          class="page"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="tabledisplayObj.curPage"
          @size-change="pageSizeChange"
          @current-change="tabledisplayChangePage"
          :total="tabledisplayObj.total"
        ></el-pagination>
      </div>
    </div>
    <el-dialog
      :title="addEditTitle"
      :visible.sync="addEditVisible"
      width="8rem"
      :close-on-click-modal="false"
      custom-class="el-dialog-bg"
    >
      <examinpaperAddEdit ref="examinpaperAddEdit" @cancel="addEditVisible=false" @ok="addEditOk"></examinpaperAddEdit>
    </el-dialog>
  </div>
</template>

<script>
let vm;
let user;
import examinpaperAddEdit from "./common/examinpaper_add_edit";
export default {
  components: { examinpaperAddEdit },
  data() {
    return {
      addEditTitle: "添加测评试卷",
      addEditVisible: false,
      isCheckAll: false, //全选
      isDelete: false, //是否可以删除
      isGround: false, //是否可以上架
      checkList: [],
      examinpaperList: [],
      tabledisplayObj: {
        total: 0,
        curPage: 1,
        pageSize: 10,
        title: "",
        status:""
      },
      statusModeList:[{
        name:"未上架",
        value:0
      },
      {
        name:"已上架",
        value:1
      },{
        name:"禁用",
        value:2
      }]
    };
  },
  methods: {
    search() {
      vm.tabledisplayObj.curPage = 1;
      vm.checkList = [];
      vm.isDelete= false; //是否可以删除
      vm.isGround= false; //是否可以上架
      vm.initData();
    },
     reset() {
      vm.tabledisplayObj = {
        total: 0,
        curPage: 1,
        pageSize: 10,
        status: "",
        title: ""
      };
      vm.isDelete= false; //是否可以删除
      vm.isGround= false; //是否可以上架
      vm.checkList = [];
      vm.initData();
    },
    deleteExaminpaper() {
      vm.$confirm("确认删除所选测评试卷吗？", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        center: true,
        showClose: false,
        type: "warning"
      })
        .then(e => {
          let paras = [];
          vm.checkList.forEach(item => {
            paras.push({
              paperId: item.paperId
            });
          });
          api.evaluateReportDelete(paras).then(function(data) {
            if (data.resultCode == 2000) {
              if (data.errorData.length != 0) {
                let str = "";
                data.errorData.forEach(item=>{
                  str+=str == ""?item.title:"、"+item.title;
                });
                vm.$message({
                  message: "试卷："+str+"已有测评数据，不能删除！",
                  type: "error"
                });
              } else {
                vm.$message({
                  message: "删除成功",
                  type: "success"
                });
              }
              vm.checkList = [];
              vm.initData();
            } else {
              vm.$message.error(data.message);
            }
          });
        })
        .catch(e => {});
    },
    /**上架 */
    uploadExaminpaper() {
      vm.$confirm("上架后，校区即可使用该试卷，确认上架吗？", "上架", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        center: true,
        showClose: false,
        type: "warning"
      })
        .then(e => {
          let paras = [];
          vm.checkList.forEach(item => {
            paras.push({
              paperId: item.paperId,
              status: 1
            });
          });
          api.examinpaperUpdate(paras).then(function(data) {
            if (data.resultCode == 2000) {
              vm.$message({
                message: "上架成功",
                type: "success"
              });
              vm.checkList = [];
              vm.initData();
            } else {
              vm.$message.error(data.message);
            }
          });
        })
        .catch(e => {});
    },
    /**初始化数据 */
    initData() {
      api.examinpaperList(vm.tabledisplayObj).then(function(data) {
        if (data.resultCode == 2000) {
          data.list.forEach(item => {
            item.isCheck = false;
           
          });
          vm.examinpaperList = data.list;
          vm.tabledisplayObj.total = data.totalCount;
        } else {
          vm.$message.error(data.message);
        }
      });
    },
    /**基本信息 */
    look_examinpaper(item) {
      vm.addEditVisible = true;
      vm.addEditTitle = "查看测评试卷";
      vm.$nextTick(function() {
        vm.$refs.examinpaperAddEdit.init(tool.clone(item));
      });
    },
    /**添加试卷回调 */
    addEditOk() {
      vm.tabledisplayObj.curPage = 1;
      vm.initData();
    },
    /**预览试卷 */
    preview_examinpaper(item) {
      var path = vm.$store.state.permit["105"].path;
      //传递参数
      this.$router.push({
        path: path,
        query: {
          paperId: item.paperId
        }
      });
    },
    /**添加题目 */
    add_edit_examinpaper(item) {
      var path = vm.$store.state.permit["104"].path;
      let subjectId = null;
      if (item.evSubjects != null && item.evSubjects.length > 0) {
        subjectId = item.evSubjects[0].subjectId;
      }
      //传递参数
      this.$router.push({
        path: path,
        query: {
          paperId: item.paperId,
          subjectId: subjectId
        }
      });
    },
    /**添加试卷 */
    addExaminpaper() {
      vm.addEditVisible = true;
      vm.$nextTick(function() {
        vm.$refs.examinpaperAddEdit.init({});
      });
    },
    /**全选 */
    checkAll() {
      vm.isCheckAll = !vm.isCheckAll;
      vm.checkList = [];
      if (vm.isCheckAll) {
        vm.examinpaperList.forEach(item => {
          item.isCheck = true;
        });
        vm.checkList = vm.examinpaperList;
      } else {
        vm.examinpaperList.forEach(item => {
          item.isCheck = false;
        });
      }
      vm.checkListData();
    },
    /**选择试卷 */
    checkItem(item) {
      item.isCheck = !item.isCheck;
      if (item.isCheck) {
        vm.checkList.push(item);
      } else {
        let index = vm.checkList.indexOf(item);
        vm.checkList.splice(index, 1);
      }
      console.log(vm.checkList);
      vm.checkListData();
    },
    /**校验选中的的试卷 */
    checkListData() {
      // vm.isDelete = vm.checkList.length > 0;
      vm.isGround = false;
      vm.isDelete = false;
      vm.checkList.forEach(item => {
        if (item.status == 0) {
          vm.isGround = true;
          vm.isDelete = true;
          return;
        }
      });
    },
    /**页码回调 */
    pageSizeChange(val) {
      vm.tabledisplayObj.pageSize = val;
      vm.initData();
    },
    /**页数回调 */
    tabledisplayChangePage(val) {
      vm.tabledisplayObj.curPage = val;
      vm.initData();
    }
  },
  mounted() {
    vm = this;
    user = tool.getItem(lsKey.user, true); //得到当前用户信息
    //获取数据字典
    let dicdata = tool.getItem(lsKey.dict, true);
    vm.initData();
  }
};
</script>

<style lang="scss">
#examinpaper_manage {
  .el-input__inner {
    border-radius: 0.08rem;
    font-size: 0.16rem;
    color: #666666;
    height: 0.36rem;
    line-height: 0.36rem;
  }
  .el-input__icon {
    line-height: 0.36rem;
  }

  .input_search {
    .el-input__inner {
      background-color: rgb(247, 248, 250);
    }
  }
  .el-dialog-bg {
    border-radius: 0.1rem;
  }
  .el-dialog__body {
    padding: 0.1rem 0.2rem 0.2rem 0.2rem;
  }
  .el-dialog__header {
    padding: 0.2rem 0.3rem 0.1rem 0.3rem;
  }
  .el-button {
    border-radius: 0.08rem;
  }
  .el-dialog__headerbtn {
    position: absolute;
    top: 0.15rem;
    right: 0.2rem;
    padding: 0;
    background: 0 0;
    border: none;
    outline: 0;
    cursor: pointer;
    font-size: 0.16rem;
  }
   .btn_user_defined {
    display: inline-block;
    width: 0.8rem;
    padding-left: 0.22rem;
    height: 0.36rem;
    line-height: 0.36rem;
    border-radius: 0.08rem;
    color: white;
    font-size: 0.16rem;
    font-weight: bold;
    cursor: pointer;
    letter-spacing: 0.03rem;
    background-color: #3885f8;
    position: relative;
    top: 0.01rem;
  }
  .btn_user_defined:hover {
    background-color: rgba(56, 133, 248, 0.8);
  }
}
</style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>
<style scoped>
</style>